import React from 'react';
import { Table as AntTable } from 'antd';
import type { TableProps as AntTableProps } from 'antd/es/table';

export interface TableColumn<RecordType = unknown> {
  title: string;
  dataIndex: string;
  key?: string;
  width?: number | string;
  render?: (text: unknown, record: RecordType, index: number) => React.ReactNode;
}

export interface CustomTableProps<RecordType = unknown> extends Omit<AntTableProps<RecordType>, 'columns' | 'title'> {
  componentId?: string;
  columns?: TableColumn<RecordType>[];
  tableTitle?: string;
  bordered?: boolean;
}

function Table<RecordType extends object = object>({
  componentId,
  columns = [],
  tableTitle,
  bordered = true,
  ...props
}: CustomTableProps<RecordType>) {
  return (
    <div className="yong-table-wrapper">
      {tableTitle && <div className="yong-table-title">{tableTitle}</div>}
      <AntTable
        columns={columns as AntTableProps<RecordType>['columns']}
        bordered={bordered}
        {...props}
        data-component-id={componentId}
      />
    </div>
  );
}

export default Table; 